<div id="handBatch_generat_cost">
    <div class="handBatch_generat_cost">
        <el-row type="flex" justify="space-between" class="title_generat_cost">
            <el-col :span="12"><div>发起收费项目</div></el-col>
            <el-col :span="12" style="text-align: right;padding-right: 30px;">
                <el-button type="primary" @click="downloadTemp">下载模板</el-button>
            </el-col>
        </el-row>

        <el-form
                class="generat-form"
                ref="form"
                :rules="rules"
                :model="form"
                label-width="200px"
                :label-position="labelPosition">
            <el-form-item label="项目类型：" prop="selectProjectType">
                <el-select v-model="form.selectProjectType" @change="getProject" placeholder="请选择项目类型" style="width: 220px;">
                    <el-option label="请选择项目类型" value=""></el-option>
                    <el-option v-for="item in pType" :label="item.projectTypeName" :value="item.projectTypeId" ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="项目名称：" prop="selectCostName">
                <el-select v-model="form.selectCostName" placeholder="请选择收费项目" style="width: 220px;">
                    <el-option v-for="item in pName" :label="item.projectName" :value="item.projectId"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="请选择文件：" prop="file">
                <div id="uploadArea" style="position:relative;text-align: left;overflow: hidden">
                    <form id="uploadForm" action="" method="post" enctype="multipart/form-data" name="fileForm" >
                        <input id="fileArea" type="file" name="file" @change="filesChange">
                        <!--<input type="button" onclick="ajaxSubmitForm();" value="确定">-->
                        <button type="button" class="layui-btn" id="liulan"  >浏览</button>
                        <span class="showFileName">{{fileNameModel}}</span>
                    </form>
                </div>
            </el-form-item>

            <el-form-item>
                <el-button type="danger"  @click="submitForm" >发起缴费</el-button>
                <el-button type="danger" class="btn-item-cancel"  @click="resetForm('form')">重置</el-button>
            </el-form-item>
        </el-form>{{isOverflow}}
    </div>
</div>


<script>
    var layer,
        loadProject;
    layui.use('layer', function(){
        layer = layui.layer;
        loadProject  = layer.load(1, {shade: [0.5, '#000']});

    });
    var upload;
    layui.use('upload', function(){
        upload = layui.upload;
        //执行实例
//        var uploadInst = upload.render({
//            elem: '#test1' //绑定元素
//            ,url: '${basePath}merchant/mProjectType/initiatePayment' //上传接口
//            ,accept: 'file'
//            ,exts: 'xls|xlsx'
//            ,done: function(res){
//                //上传完毕回调
//                alert(res.msg)
//            }
//            ,error: function(){
//                //请求异常回调
//
//            }
//        });
    });




    var handBatch_generat_cost =
        new Vue({
            el: "#handBatch_generat_cost",
            data: {
                fileNameModel:'',
                isTrueName:false,
                pType:[],
                pName:[],
                fileList: [],
                labelPosition:'left',
                form: {
                    selectProjectType:'',
                    selectCostName:'',
                    file:''
                },
                rules: {
                    selectProjectType: [
                        { required: true, message: '请选择项目类型', trigger: 'change' }
                    ],
                    selectCostName: [
                        { required: true, message: '请选择收费项目', trigger: 'change' }
                    ],
                    file: [
                        { required: true, message: '请选择文件', trigger: 'change' }
                    ]
                },
            },
            methods: {
                filesChange:function () {
                    var nameFlis = $("#fileArea").val();
                    var fileName123 = nameFlis.split("\\");
                    this.fileNameModel = fileName123[fileName123.length-1];
                    var endName = this.fileNameModel.split(".")[1];
                    if(endName == 'xls' ||endName == 'xlsx' ){
                        this.isTrueName = true;
                    }else {
                        this.isTrueName = false;
                        layer.msg('请选择xls、xlsx格式文件上传', {icon: 2});
                    }
                },
//                // 限制上传一个
//                handleExceed:function(files, fileList) {
//                    this.$message.warning('当前限制选择 1 个文件');
//                },
//                // 上传成功后的回调
//                uploadSuccess:function(response, file, fileList) {
//                    if(response.status == 'success'){
//                        this.$message.warning(response.msg);
//                        fileList.splice(0,fileList.length);//清空数组
//                    }else if(response.status == 'error'){
//                        fileList.splice(0,fileList.length);//清空数组
//                        this.$message.warning(response.msg);
//                    }
//                    // 刷新页面
////                    reloadPage('${basePath}merchant/mProjectType/enterBatchGeneratCost');
//                },
//                // 上传前对文件的大小的判断
//                beforeAvatarUpload:function (file) {
//                    var extension = file.name.split('.')[1] === 'xls';
//                    var extension2 = file.name.split('.')[1] === 'xlsx';
//                    if (!extension && !extension2) {
//                        this.$message.warning('上传模板只能是 xls、xlsx 格式!');
//                    }
//                    return extension || extension2
//                },
                getProject:function(){
                    var options= {projectTypeId:this.form.selectProjectType};
                    if(this.form.selectProjectType == ""){
                        handBatch_generat_cost.form.selectCostName = "";
                        return;
                    }
                    sendService('${basePath}merchant/mProjectType/getProjectNameMenu', options, function (resData) {
                        if(resData.status == 'success'){
                            handBatch_generat_cost.pName = resData.t.mProject;
                            if(handBatch_generat_cost.form.selectProjectType == ''){
                                handBatch_generat_cost.form.selectCostName = '';
                            }else if(handBatch_generat_cost.form.selectProjectType != '') {
                                if (handBatch_generat_cost.pName.length == 0) {
                                    //handBatch_generat_cost.$message.warning('该项目类型下无收费项目');
                                    layer.msg('该项目类型下无收费项目', {icon: 2});
                                    handBatch_generat_cost.form.selectCostName = '';
                                } else {
                                    handBatch_generat_cost.form.selectCostName = handBatch_generat_cost.pName[0].projectId;
                                }
                            }
                        }
                    })
                },
                handleRemove:function(file, fileList) {
                    console.log(file, fileList);
                },
                handlePreview:function(file) {
                    console.log(file);
                },
                // 下载模板
                downloadTemp:function() {
                    window.location.href = "${basePath}merchant/mProjectType/getBatchExcelModel";
                },
                //发起缴费
                submitForm:function() {
                    if(this.form.selectCostName == ''){
                        //this.$message.warning('请选择项目类型及项目名称');
                        layer.msg('请选择项目类型及项目名称', {icon: 2});
                    } else if(this.fileNameModel == ''){
                        //this.$message.warning('请选择文件');
                        layer.msg('请选择文件', {icon: 2});
                    } else if(!this.isTrueName){
                        layer.msg('请选择xls、xlsx格式文件上传', {icon: 2});
                    } else{
                        //this.$refs.upload.submit();
                        this.ajaxSubmitForm();
                    }
                },
                ajaxSubmitForm:function() {
                    var that = this;
                    var option = {
                        url : '${basePath}merchant/mProjectType/initiatePayment',
                        type : 'POST',
                        data:{selectProjectType:that.form.selectProjectType,selectCostName:that.form.selectCostName},
                        dataType : 'json',
                        headers : {"ClientCallMode" : "ajax"}, //添加请求头部
                        success : function(data) {
                            if(data[0].status == 'success'){
                                that.fileNameModel = '';
                                layer.msg(data[0].msg, {icon: 6});
                                $(".main-right").empty();
                                $(".main-right").load('${basePath}/handBatchIE9');
                            }else{
                                layer.msg(data[0].msg, {icon: 2});
                                return;
                            }
                        },
                        error: function(data) {
                            $(".main-right").empty();
                            $(".main-right").load('${basePath}/handBatchIE9');
                            layer.msg(data[0].msg, {icon: 2});
                        }
                    };
                    $("#uploadForm").ajaxSubmit(option);
//        $(".main-right").empty();
//        $(".main-right").load('${basePath}/jigouIE9');
                    return false;
                },
                //重置
                resetForm:function(formName){
                    this.$refs[formName].resetFields();
                    reloadPage('${basePath}merchant/mProjectType/enterBatchGeneratCost')
                   // this.$refs.upload.handleRemove();
                },
            },
            created: function () {
                var options= {};
                sendService('${basePath}merchant/mProjectType/getProjectTypeMenu', options, function (resData) {
                    if(resData.status == 'success'){
                        layer.close(loadProject);
                        handBatch_generat_cost.pType = resData.t.mProjectType;
                    }
                })
            },
            computed:{
                isOverflow:function () {
                    if(this.isShowingBox){
                        $(".main-right").css({'overflow':"hidden"});
                    }
                    if(!this.isShowingBox){

                        $(".main-right").css({'overflow':"auto"});
                    }

                }
            }
        });



</script>

<style scoped>
    .handBatch_generat_cost .title_generat_cost{
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 10px;
        color: #333333;
        background: #ffffff;
    }
    .handBatch_generat_cost .generat-form{
        background: #ffffff;
        padding: 50px 0 50px 30px;
    }
    .handBatch_generat_cost .generat-form label.el-form-item__label{
        font-size: 16px;
        color: #666666;
    }
    .handBatch_generat_cost .generat-form .el-form-item{
        margin-bottom: 50px;
    }
    .handBatch_generat_cost .generat-form .btn-item-cancel{
        margin-left: 100px;
    }
    .el-select-dropdown{
        width: 200px;
    }
    .layui-btn{
        background-color: #409EFF;
        height: 32px;
        line-height: 32px;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;
        border-radius:3px;
    }
    .handBatch_generat_cost .el-input--suffix .el-input__inner{
        font-size: 12px;
    }
    #fileArea{
        height: 40px;
        width: 150px;
        position: absolute;
        left: -83px;
        opacity: 0;
    }
</style>
